@frame-box-shadow: rgba(0, 21, 41, 0.08);

#app {
  .app-frame {
    min-height: 100vh;
  }

  .h-layout-sider {
    z-index: 2;
    box-shadow: 0 1px 4px @frame-box-shadow;
  }

  .h-layout-header {
    overflow: hidden;
    box-shadow: 0px 1px 4px 0 @frame-box-shadow;
  }

  .h-layout-sider-collapsed {
    .app-logo {
      padding-left: 5px;
    }

    .h-layout-header-fixed {
      .sys-tabs-vue {
        left: @layout-sider-collapse-width;
      }
    }
  }

  .h-layout-header-fixed {
    .sys-tabs-vue {
      position: fixed;
      top: @layout-header-height;
      right: 0;
      z-index: 2;
      left: @layout-sider-width;
    }

    .sys-tabs-vue + .h-layout-content {
      margin-top: @sys-tabs-height;
    }
  }

  .h-layout-sider-fixed .h-layout-header-fixed {
    .h-layout-content {
      overflow: auto;
      height: calc(~'100vh - @{layout-header-height}');
    }

    .sys-tabs-vue + .h-layout-content {
      height: calc(~'100vh - @{layout-header-height} - @{sys-tabs-height}');
    }
  }

  .h-layout-sider-theme-dark .app-logo a {
    color: #fff;
  }
}

@media (max-width: 900px) {
  #app {
    .app-header-info {
      .h-autocomplete,
      .app-header-icon-item {
        display: none;
      }
    }

    .h-layout {
      padding-left: 0;

      .app-menu-mask {
        position: fixed;
        left: @layout-sider-width;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        z-index: 1;
      }

      &.h-layout-sider-collapsed {
        > .h-layout-sider {
          transform: translateX(-@layout-sider-collapse-width);
          overflow: hidden;
        }

        .app-menu-mask {
          display: none;
        }
      }
    }

    .h-layout-content {
      -webkit-overflow-scrolling: touch;
    }

    .h-layout-header-fixed .h-layout-header {
      left: 0 !important;
    }

    .sys-tabs-vue {
      left: 0 !important;
    }
  }
}
